<template>
	<view>
		<s-layout title="" :bgStyle="{ color: '#fff' }" :onShareAppMessage="shareInfo">
			<!-- @change="onswiperchange" @transition="onswiperscroll"
			  @animationfinish="animationfinish" @onAnimationEnd="animationfinish" -->
			<swiper class="tab-box" ref="swiper1" :current="state.tabIndex" :circular="true" :duration="300" @animationfinish="onswiperchange" :style="{ height: state.swiptHeight }" height="100vh">
				<swiper-item class="swiper-item" v-for="(page, index) in state.pageList" :key="page.num" style="height: auto" height="100vh">
					<scroll-view scroll-y="true" style="height: auto">
						<!-- {{ page.num }} -->
						<Item :currentData="page" :ref="'Item' + index" :id="'Item' + index"></Item>
					</scroll-view>
				</swiper-item>
			</swiper>
			<!-- <s-empty v-if="state.goodsInfo === null" text="商品不存在或已下架" icon="/static/soldout-empty.png" showAction actionText="再逛逛" actionUrl="/pages/goods/list" /> -->
			<!-- <block v-else> 123 </block> -->
		</s-layout>
	</view>
</template>

<script setup>
	import Item from './components/data';
	import dayjs from 'dayjs';
	import HuangdaoApi from '@/sheep/api/huangdao';
	// 缓存每页最多
	const MAX_CACHE_DATA = 100;
	// 缓存页签数量
	const MAX_CACHE_PAGE = 3;
	const TAB_PRELOAD_OFFSET = 1;
	const shareInfo = ref({
		title: '111',
		bgImgUrl: '123',
	});
	const key = '2024年02月27日';
	const curretData = reactive({
		'2024年02月27日': {
			solar: '2024年03月05日',
			lunar: '正月廿五日',
			weekInChinese: '星期二',
			dayYi: '祭祀 扫舍 塞穴',
			dayJi: '栽种 作灶 安葬 嫁娶',
			dayJiShen: '天恩 守日 天巫 福德 六仪 金堂 金匮',
			dayXiongSha: '厌对 招摇 九空 九坎 九焦',
			xingZuo: '双鱼',
			monthShengXiao: '龙',
			dayTianShen: '天刑',
			chongSha: '冲狗煞南',
			xingshu: '南方翼蛇火',
			dayPositionCaiDesc: '正北',
			dayPositionFuDesc: '东北',
			dayPositionXiDesc: '东南',
			dayPositionYangGuiDesc: '东北',
			dayPositionYinGui: '西南',
			dayXiShengXiao: '鸡猴鼠',
			zhiXing: '除',
			dayXunKong: '戌亥',
			jieQi: '节气惊蛰 2024-03-05',
			nextJieQi: '节气春分 2024-03-20',
			yearInGanZhi: '甲辰年',
			monthInGanZhi: '丙寅月',
			dayInGanZhi: '戊辰日',
			timeInGanZhi: '壬子时',
			yearNaYin: '覆灯火',
			monthNaYin: '炉中火',
			dayNaYin: '大林木',
			timeNaYin: '桑柘木',
			dayLuckFlower: '龙吐珠 采雀草',
			dayLuckNumber: '一 七 六',
			dayJiNumber: '三 八 九',
			dayLuckColour: '金 银 灰白',
			dayJiColour: '红 绿 紫 黑',
			timeJiXiongList: [
				{
					time: '子时',
					timeTianShenLuck: '凶',
					timeTianShen: '天牢',
					timeSha: '煞南',
					timePositionXiDesc: '正南',
					timePositionCaiDesc: '正南',
					timeShenSha: '天牢 路空 三合 大进',
					timeRange: '23:00-00:59',
				},
				{
					time: '丑时',
					timeTianShenLuck: '凶',
					timeTianShen: '玄武',
					timeSha: '煞东',
					timePositionXiDesc: '东南',
					timePositionCaiDesc: '正南',
					timeShenSha: '元武 路空 贵人 国印',
					timeRange: '01:00-02:59',
				},
				{
					time: '寅时',
					timeTianShenLuck: '吉',
					timeTianShen: '司命',
					timeSha: '煞北',
					timePositionXiDesc: '东北',
					timePositionCaiDesc: '东北',
					timeShenSha: '不遇 长生 司命 驿马',
					timeRange: '03:00-04:59',
				},
				{
					time: '卯时',
					timeTianShenLuck: '凶',
					timeTianShen: '勾陈',
					timeSha: '煞西',
					timePositionXiDesc: '西北',
					timePositionCaiDesc: '东北',
					timeShenSha: '日害 勾陈 狗食 天官',
					timeRange: '05:00-06:59',
				},
				{
					time: '辰时',
					timeTianShenLuck: '吉',
					timeTianShen: '青龙',
					timeSha: '煞南',
					timePositionXiDesc: '西南',
					timePositionCaiDesc: '西南',
					timeShenSha: '天兵 日刑 喜神 青龙',
					timeRange: '07:00-08:59',
				},
				{
					time: '巳时',
					timeTianShenLuck: '吉',
					timeTianShen: '明堂',
					timeSha: '煞东',
					timePositionXiDesc: '正南',
					timePositionCaiDesc: '西南',
					timeShenSha: '大退 日禄 五符 明堂',
					timeRange: '09:00-10:59',
				},
				{
					time: '午时',
					timeTianShenLuck: '凶',
					timeTianShen: '天刑',
					timeSha: '煞北',
					timePositionXiDesc: '东南',
					timePositionCaiDesc: '正北',
					timeShenSha: '天刑 六戊 太阴 贪狼',
					timeRange: '11:00-12:59',
				},
				{
					time: '未时',
					timeTianShenLuck: '凶',
					timeTianShen: '朱雀',
					timeSha: '煞西',
					timePositionXiDesc: '东北',
					timePositionCaiDesc: '正北',
					timeShenSha: '朱雀 天乙 右弼',
					timeRange: '13:00-14:59',
				},
				{
					time: '申时',
					timeTianShenLuck: '吉',
					timeTianShen: '金匮',
					timeSha: '煞南',
					timePositionXiDesc: '西北',
					timePositionCaiDesc: '正东',
					timeShenSha: '地兵 三合 金匮 左辅',
					timeRange: '15:00-16:59',
				},
				{
					time: '酉时',
					timeTianShenLuck: '吉',
					timeTianShen: '天德',
					timeSha: '煞东',
					timePositionXiDesc: '西南',
					timePositionCaiDesc: '正东',
					timeShenSha: '天贼 六合 天德 宝光',
					timeRange: '17:00-18:59',
				},
				{
					time: '戌时',
					timeTianShenLuck: '凶',
					timeTianShen: '白虎',
					timeSha: '煞北',
					timePositionXiDesc: '正南',
					timePositionCaiDesc: '正南',
					timeShenSha: '日破',
					timeRange: '19:00-20:59',
				},
				{
					time: '亥时',
					timeTianShenLuck: '吉',
					timeTianShen: '玉堂',
					timeSha: '煞西',
					timePositionXiDesc: '东南',
					timePositionCaiDesc: '正南',
					timeShenSha: '路空 玉堂 少微',
					timeRange: '21:00-22:59',
				},
			],
		},
	});
	const state = reactive({
		tabIndex: 4,
		swiptHeight: '100vh',
		pageList: [{ num: 0 }, { num: 1 }, { num: 2 }, { num: 3 }, { num: 4 }, { num: 5 }, { num: 6 }, { num: 7 }, { num: 8 }],
		resData: [],
		min: 0,
		max: 0,
		isBack: false,
	});
	onLoad(async () => {
		console.log('onLoad');
		const d = curretData['2024年02月27日'];
		const pageList = await createData(-4, 9);
		state.pageList = pageList;
		state.resData = [...pageList];
		state.min = -4;
		state.max = 4;
		console.log('resData', state.resData);
		console.log('pageList', state.pageList);
		setTimeout(() => {
			initHeight();
		}, 1000);
	});

	onMounted(() => {
		initHeight();
	});

	watch(
		() => state.tabIndex,
		(newVal, oldVal) => {
			state.isBack = newVal < oldVal;
		},
	);

	function initHeight() {
		let infos = uni.createSelectorQuery().select('#Item' + state.tabIndex);
		infos
			.boundingClientRect((data) => {
				console.log('boundingClientRect', data);
				state.swiptHeight = data.height + 'px';
			})
			.exec();
	}

	function onswiperchange(e) {
		// 注意：百度小程序会触发2次
		let index = e.target.current || e.detail.current;
		state.tabIndex = index;
		setListData(index);
	}
	async function setListData(index) {
		if (index === 0) {
			const num = state.pageList[0].num;
			await loadTabData(5, num, 'min');
			editData(4, 8, num - 5);
		}
		if (index === 3) {
			const num = state.pageList[3].num;
			console.log(num);
			await loadTabData(5, num, 'min');
			await loadTabData(5, num, 'max');
			editData(0, 8, num - 3);
		}
		if (index === 5) {
			const num = state.pageList[5].num;
			console.log(num);
			await loadTabData(5, num, 'min');
			await loadTabData(5, num, 'max');
			editData(0, 8, num - 5);
		}
		if (index === 8) {
			const num = !state.isBack ? state.pageList[8].num : 1;
			if (!state.isBack) {
				await loadTabData(5, num, 'max');
				editData(0, 4, num + 1);
			}
		}
	}
	async function loadTabData(count, currentNum, type) {
		if (type === 'max') {
			if (currentNum + count > state.max) {
				const countA = currentNum + count - state.max;
				const data = await createData(state.max + 1, countA);
				state.resData.push(...data);
				state.max = state.max + countA;
			}
		}
		if (type === 'min') {
			if (currentNum - count < state.min) {
				let countA = Math.abs(currentNum - count - state.min);
				const data = await createData(state.min - countA, countA);
				console.log('min createData data', state.min - countA, countA, data);
				state.resData.unshift(...data);
				state.min = state.min - countA;
			}
		}
		initHeight();
	}

	async function createData(form, count) {
		const pageList = [];
		const startTime = dayjs().add(form, 'day').valueOf();
		const endTime = dayjs()
			.add(form + count, 'day')
			.valueOf();
		return HuangdaoApi.getCalendarList(startTime, endTime).then((res) => {
			console.log(res);
			for (let i = form, x = 0; i < form + count; i++, x++) {
				const d = res.data[x];
				d.num = i;
				pageList.push({ ...d });
			}
			return pageList;
		});
	}

	function editData(form, to, start) {
		const resDataIndex = state.resData.findIndex((item) => item.num === start);
		for (let i = form; i <= to; i++) {
			state.pageList[i] = state.resData[resDataIndex + (i - form)];
		}
	}
	function clearTabData(index) {
		state.pageList[index].clear();
	}
</script>

<style lang="scss" scoped>
	uni-view {
		display: block;
	}
	uni-page-body {
		padding: 0px 10px;
		background-color: #fcf9f0;
	}
	uni-page-body,
	uni-page-refresh {
		display: block;
		box-sizing: border-box;
		width: 100%;
	}
	.header {
		width: 100%;
		background-color: #cb7b48;
		height: 70px;
		.text {
			color: #e10c10;
			font-size: 16px;
			font-weight: 800;
			text-shadow: 0 1px #fff, 1px 0 #fff, -1px 0 #fff, 0 -1px #fff;
		}
	}
	.out {
		border-left: 2px solid #ab8767;
		border-bottom: 2px solid #ab8767;
		border-right: 2px solid #ab8767;
	}
	.all-flex {
		display: flex;
		display: -webkit-flex;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
	}
	.all-flex-nowarp {
		flex-wrap: nowrap !important;
		-webkit-flex-wrap: nowrap !important;
	}
	.all-flex-row {
		flex-direction: row;
	}
	.all-flex-col {
		flex-direction: column;
	}
	.all-row-center {
		justify-content: center;
	}
	.all-row-start {
		justify-content: flex-start;
	}
	.all-row-end {
		justify-content: flex-end;
	}
	.all-row-around {
		justify-content: space-around;
	}
	.all-row-between {
		justify-content: space-between;
	}
	.all-col-center {
		align-items: center;
	}
	.all-col-start {
		align-items: flex-start;
	}
	.all-col-end {
		align-items: flex-end;
	}
	.all-col-stretch {
		align-items: stretch;
	}
	.all-flex-spacer {
		flex-grow: 1;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.date {
		width: 100%;
	}
	.date .header {
		width: 100%;
		background-color: #cb7b48;
		height: 70px;
	}
	.date .header .date-font {
		color: #e10c10;
		font-size: 16px;
		font-weight: 800;
		text-shadow: 0 1px #fff, 1px 0 #fff, -1px 0 #fff, 0 -1px #fff;
	}
	.date .out {
		border-left: 2px solid #ab8767;
		border-bottom: 2px solid #ab8767;
		border-right: 2px solid #ab8767;
	}
	.date .line-bottom {
		border-bottom: 1px solid #b7ada1;
	}
	.date .line-right {
		border-right: 1px solid #b7ada1;
	}
	.date .unit-line-left {
		border-left: 1px solid #b7ada1;
	}
	.date .second {
		height: 30px;
		width: 100%;
		border-bottom: 1px solid #b7ada1;
		font-weight: 600;
	}
	.date .second .unit {
		width: 33%;
		height: 100%;
		text-align: center;
	}
	.date .second .unit .title {
		margin-left: 10px;
		margin-right: 10px;
		font-size: 12px;
	}
	.date .second .unit .explain {
		font-size: 9px;
	}
	.date .second .unit-line {
		border-left: 1px solid #b7ada1;
		border-right: 1px solid #b7ada1;
	}
	.date .third {
		border-top: 2px solid #ab8767;
		border-radius: 9px;
	}
	.date .third .unit {
		width: 100%;
		height: 28px;
		line-height: 28px;
		text-align: center;
		font-weight: 600;
		font-size: 10px;
	}
	.date .fourth {
		border-top: 2px solid #ab8767;
		border-radius: 9px;
	}
	.date .fourth .unit {
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 11px;
		color: #e10c10;
		background-image: url(/static/images/bazi_bg.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 50%;
	}
</style>
